/**
 *  学习目标：React 路由
 *    HashRouter 组件：    hash 模式
 *    BrowserRouter 组件： history 模式
 *          类似 Vue 的  new VueRouter()
 *          开发经验：导入 HashRouter / BrowserRouter 组件后建议通过 as 改名为 Router
 *    Route 组件：
 *          类似 Vue 的 路由配置：<router-view> 组件 + { path:'xxx', component:'xxx' } 配置
 *    Link/NavLink  组件：
 *          类似 Vue 的 <router-link> 组件
 *          注意事项：
 *            Link/NavLink 组件需要嵌套到 HashRouter / BrowserRouter 组件内
 *            NavLink 组件如果路径匹配的话，会自动添加  class="active" 的类名
 *    Switch 组件：
 *         通常，我们会把`Route`包裹在一个`Switch`组件中
 *         在`Switch`组件中，不管有多少个路由规则匹配到了，都只会渲染第一个匹配的组件
 *         通过`Switch`组件内，能实现404错误页面的提示
 */
import React from 'react'
// BrowserRouter as Router  作用：把 BrowserRouter 组件改名为 Router
import { BrowserRouter as Router, Route, NavLink, Switch } from 'react-router-dom'
import Find from './views/Find'
import My from './views/My'
import Login from './views/Login'
import NotFound from './views/NotFound'
import PlayListDetail from './views/PlayListDetail'

export default class App extends React.Component {
  render() {
    return (
      <>
        <Router>
          <h1>仿网易云音乐路由-公共的头部</h1>
          <p>
            <NavLink to='/find'>发现音乐</NavLink>
          </p>
          <p>
            <NavLink to='/login'>登录页</NavLink>
          </p>
          <h3>-----------------巨型分割线，下面渲染页面组件-----------------</h3>
          {/* 推荐写法：通过 component 属性绑定组件，会通过 props 传递路由相关信息给子组件，工作常用 */}
          <Switch>
            <Route path='/find' component={Find} />
            <Route path='/my' component={My} />
            <Route path='/login' component={Login} />
            {/* 动态路由参数，通过 /:xxx 占位   */}
            <Route path='/playlist/:id' component={PlayListDetail} />
            {/* 处理 404 情况需要写 Switch 的最后 */}
            <Route component={NotFound} />
          </Switch>
        </Router>
      </>
    )
  }
}
